<template>
  <div class="cardsLines">
    <el-card class="cardItem cardNav"  shadow="hover" v-for="(item, index) in data" :key="index">
      <template #header>
        <div class="cardTitle">
          <span>{{ item.title }}</span>
          <el-tag class="titleTag" effect="plain" :type="item.type" size="mini">{{
            item.tip
          }}</el-tag>
        </div>
      </template>
      <div class="childBox">
        <el-row :gutter="20">
          <el-col
            :span="span"
            :offset="0"
            v-for="(it, ind) in item.children"
            :key="ind"
            @click="cardHandle(it)"
          >
            <el-card class="itemBox" shadow="always">
              <div class="itemContent">
                <div class="numBox"><countAnimate :num="it.num"></countAnimate></div>
                <div>{{ it.title }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import countAnimate from '@/components/common/countAnimate.vue'

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  span: {
    type: Number,
    default: 4,
  },
});

function cardHandle(item) {
  console.log("多行卡片选中：", item);
}
</script>

<style lang="scss" scoped>

@use "@/common.scss";

.cardsLines {
  :deep(.el-card) {
    // border: unset;
    cursor: pointer;
    @apply bg-light-50 hover:shadow-inner;
  }
  .cardItem {
    width: 100%;
    display: flex;
    flex-direction: column;
    @apply mb-5;
    &:last-child {
      margin-bottom: 0;
    }
    .cardTitle {
      @apply flex justify-between;
      padding: 2px;
      span {
        @apply text-base;
      }
      .titleTag{
        line-height: var(--el-font-size-base);
      }
    }
    .childBox {
      .itemBox {
        
        .itemContent{
          @apply flex flex-col items-center justify-content cursor-pointer;
          .numBox{
            padding: 5px;
            @apply text-xl font-bold text-gray-500;
          }
        }
        .icon {
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>